//引入react
import React, { Component } from 'react'
//引入action
import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from '../../redux/count_action'

//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'

//映射状态
const mapStateToProps = state => ({count:state})

//映射操作状态的方法--mapDispatchToProps的一般写法
// const mapDispatchToProps = dispatch => ({
//   increment:data=>dispatch(createIncrementAction(data)),
//   decrement:data=>dispatch(createDecrementAction(data)),
//   incrementAsync:(data,time)=>dispatch(createIncrementAsyncAction(data,time))
// })

//映射操作状态的方法--mapDispatchToProps的简写
const mapDispatchToProps = {
  increment:createIncrementAction,
  decrement:createDecrementAction,
  incrementAsync:createIncrementAsyncAction
}

class Count extends Component {

  state = {countxxx:0}

  //加法
  increment = ()=>{
    const {value} = this.selectNumber
    this.props.increment(value*1)
  }
  //减法
  decrement = ()=>{
    const {value} = this.selectNumber
    this.props.decrement(value*1)
  }
  //奇数再加
  incrementIfOdd = ()=>{
    const {value} = this.selectNumber
    if(this.props.count % 2 !== 0){
      this.props.increment(value*1)
    }
  }
  //异步加
  incrementAsyn = ()=>{
    const {value} = this.selectNumber
    this.props.incrementAsync(value*1, 500)
  }

  render() {
    console.log('UI组件接受的参数是：', this.props)
    return (
      <div>
        <h1>当前求和为：{this.props.count}</h1>
        <select ref={c=>this.selectNumber=c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsyn}>异步加</button>&nbsp;
      </div>
    )
  }
}

//使用connect()()创建并暴露一个容器组件
export default connect(mapStateToProps, mapDispatchToProps)(Count)
